<template>
  <view class="content">
    <view class="content-header">
      <image src="https://small.qaqavr.com/img/zhongrui/bg.png" mode=""></image>
    </view>

    <view class="content-box">
      <view class="baoming" v-for="(item, index) in list" :key="index">
        <view style="width: 100%; height: 50rpx;  display: flex;justify-content: space-between; align-items: center;">
          <view style="display: flex;justify-content: space-between; align-items: center;">
            <view style="width: 55rpx ; height: 55rpx; margin-right: 10rpx;"><image src="https://small.qaqavr.com/img/zhongrui/aini.png" style="width: 100%; height: 100%;" mode=""></image></view>
            <view style="font-size: 32rpx; font-weight: 600;">{{ item.job.jobName }}</view>
          </view>

          <view style="font-size: 30rpx ; font-weight: 600; color: #666666 ;">{{ item.job.jobStatus == 1 ? '招聘中' : '已结束' }}</view>
        </view>

        <view
          style="width: 100%; height: 100rpx; background-color: #f7f7f7; margin-top: 20rpx; box-sizing: border-box; padding: 5rpx 50rpx;font-size: 24rpx; color: #666666; display: flex; flex-direction: column; justify-content: space-around;"
        >
          <view>岗位状态: {{ item.job.createTime }}</view>
          <view>职位代号: {{ item.jobType.keyWord + item.job.jobNum }}</view>
        </view>
        <view class="foot">
          <view style="margin-right: 10rpx;" @click="quitCollection(item)">取消收藏</view>
          <view style=" background-color: #2589FF; color: #FFFFFF; " @click="workDetails(item)">查看详情</view>
        </view>
      </view>
    </view>

    <!-- <u-loadmore  :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" /> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      listData: {
        openId: uni.getStorageSync('openid'),
        pageIndex: 1,
        pageSize: 20
      },
      status: 'loadmore',
      loadingText: '加载中',
      loadmoreText: '上拉加载',
      nomoreText: '暂无更多'
    };
  },
  onShow() {
    this.getList();
  },
  onReachBottom() {
    console.log(123);
    this.listData.pageSize = this.listData.pageSize + 10;
    this.status = 'loading';
    this.getList();
    //this.status = 'nomore'
  },
  methods: {
    // 获取收藏数据
    async getList() {
      const { data } = await uni.$http.post('/job/findCollectionPage', this.listData);
      console.log(data.data.data);
      if (data.statusCode !== 200) {
        return;
      } else {
        this.list = data.data.data;
        console.log('this.list', this.list);

        if (this.list.length === data.data.total) {
          this.status = 'nomore';
        }
      }
    },
    async quitCollection(item) {
      console.log(item);
      item.job.isCollection = 0;
      const { data } = await uni.$http.get('/job/collectionJob?jobId=' + item.job.id + '&openId=' + uni.getStorageSync('openid'));
      if (data.statusCode !== 200) {
        return uni.$u.toast('取消失败');
      } else {
        uni.showToast({
          title: data.message,
          icon: 'success'
        });
        this.getList();
      }
    },
    // 工作详情
    workDetails(item) {
      console.log('item', item);
      uni.navigateTo({
        url: '../collectionDetails/collectionDetails?item=' + JSON.stringify(item)
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 100%;
  // height: 100%;
  background-color: #f7f7f7;

  .content-header {
    height: 300rpx;
    background-color: #f7f7f7;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .content-box {
    position: absolute;
    top: 50rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    // height: 800rpx;
    margin-bottom: 50rpx;
    .baoming {
      width: 100%;
      height: 250rpx;
      margin-top: 10rpx;
      box-sizing: border-box;
      padding: 10rpx 30rpx;
      background-color: #fff;
      border-radius: 15rpx;
      box-shadow: 0 0 5rpx #ccc;
    }
    .foot {
      width: 100%;
      height: 60rpx;
      margin-top: 10rpx;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      view {
        width: 150rpx;
        height: 40rpx;
        background-color: #fff;
        border-radius: 25rpx;
        color: #2589FF;
        display: flex;
        justify-content: center;align-items: center;
        font-size: 22rpx;
        border: 2rpx solid #2589ff;
      }
    }
  }
}
</style>
